<!DOCTYPE html>
<html>
	<head>
		<title>Mapbox Vector Tiles</title>
		<link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
		<script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script>
		<script src="js/style.js"></script>
		<style>
			.map {
				width: 100%;
				height: 100%;
				position: absolute;
				background: #f8f4f0;
			}
		</style>
	</head>
	<body>
		<div id="map" class="map"></div>
			<script>
				var map = new ol.Map({
					layers: [
						new ol.layer.VectorTile({
							source: new ol.source.VectorTile({
								attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
								'© <a href="http://www.openstreetmap.org/copyright">' +
								'OpenStreetMap contributors</a>',
								format: new ol.format.MVT(),
								tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
								tilePixelRatio: 16,
								url: '/maps/tanzania_osm/{z}/{x}/{y}.vector.pbf?debug=true'
							}),
							style: createMapboxStreetsV6Style()
						})
					],
					target: 'map',
					view: new ol.View({
						center: [4364508, -767012],
						zoom: 14
					})
				});

				// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
				// ol.style.Text are required for createMapboxStreetsV6Style()
		</script>
	</body>
</html>
